<template>
    <div class="merchantInfo">
        <CommonTabs :tabList="tabList" v-model="activeName"></CommonTabs>
        <el-form :inline="true" ref="formRef" :model="form" class="infos" label-width="80px" :rules="rules">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="商家名称" prop="name">
                        <CommonInput v-model="form.name" placeholder="商家名称" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="商家地址" prop="address">
                        <CommonInput v-model="form.address" placeholder="商家地址" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="联系方式" prop="phone">
                        <CommonInput v-model="form.phone" placeholder="联系方式" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="标签" prop="tag">
                        <CommonInput v-model="form.tag" placeholder="标签请用逗号隔开" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="商家图片" prop="img">
                        <el-upload :headers="{
                            Authorization: token
                        }" :action="action" list-type="picture-card" :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove" :on-success="handleSuccess" :file-list="fileList">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="商家公告" prop="briefIntroduction">
                        <el-input type="textarea" :rows="8" v-model="form.briefIntroduction"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- <el-form-item> -->
            <div class="btns">
                <div class="makeSure first" @click="handleMakeSure">确定</div>
                <div class="makeSure" @click="handleJoin">申请入驻</div>

            </div>
            <!-- </el-form-item> -->

        </el-form>

    </div>
</template>

<script>
import { getBusinessInfo, uploadBusinessInfo,joinApply } from "@/api/mercharntInfo"
export default {
    data() {
        return {
            token: '',
            action: '',
            tabList: [
                {
                    label: '商家信息',
                    name: 'merchantInfo',
                },

            ],
            activeName: 'merchantInfo',
            imgForm: {
                img: ''
            },
            form: {
                name: '',
                address: '',
                phone: '',
                tag: '',
                briefIntroduction: '',
                img: ''
            },
            info: {},
            imgId: '',
            rules: {
                name: [
                    { required: true, message: '请输入商家名称', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入商家地址', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入商家联系方式', trigger: 'blur' }
                ],
            },
            fileList: [],
            filePicList: [],
            baseUrl: ''
        };
    },
    created() {

    },
    mounted() {
        this.token = localStorage.getItem('token').replaceAll('"', '')
        this.action = process.env.VUE_APP_BASE_API + '/file/upload'
        this.baseUrl = process.env.VUE_APP_ASSETSURL
        this.getInfo()
        setTimeout(() => {
            this.uploadEl = document.querySelector('.el-upload--picture-card');
            this.uploadEl.addEventListener('click', (e) => {
                if (this.filePicList.length > 0) {
                    this.$message.error('只能上传一张图片')
                    e.preventDefault();
                }
            });
        }, 0)
    },

    methods: {
        async handleMakeSure() {
            this.$refs.formRef.validate(async (valid) => {
                if (valid) {
                    let data = {
                        id: this.info.id,
                        name: this.form.name,
                        address: this.form.address,
                        briefIntroduction: this.form.briefIntroduction,
                        imgId: this.imgId,
                        phone: this.form.phone,
                        tag: this.form.tag
                    }
                    const res = await uploadBusinessInfo(data)
                    console.log(res, 'rrr');
                    if (res.code == 200) {
                        this.$message.success('修改成功')
                        const res = await getBusinessInfo()
                        this.$bus.emit('getUserInfo', res.data)

                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        async handleJoin() {
            if (this.form.name.includes('null')) {
                this.$message.error('请先完善商家信息')
                return
            }
            const res = await joinApply()
            if(res.code == 200){
                this.$message.success('申请成功')
            }

        },
        async getInfo() {
            const res = await getBusinessInfo()
            this.info = res.data
            this.form.name = this.info.name
            this.form.address = this.info.address
            this.form.phone = this.info.phone
            this.form.tag = this.info.tag
            this.form.briefIntroduction = this.info.briefIntroduction
            let last = this.info.imgUrl?.split('.')[1]
            if (!last) {
                this.fileList = []

            } else {

                this.fileList = [{ name: `food.${last}`, url: this.baseUrl + this.info.imgUrl }]
                this.filePicList = [{ name: `food.${last}`, url: this.baseUrl + this.info.imgUrl }]
            }
        },
        handlePictureCardPreview() {

        },
        handleSuccess(v) {
            this.imgId = v.data.id
            this.filePicList.push({
                name: v.data.fileName,
                url: ''
            })
        },
        handleRemove() {
            this.filePicList = []
            this.fileList = []
        }
    },
};
</script>
<style scoped lang="less">
.merchantInfo {
    height: 100%;

    .infos {
        .btns {
            display: flex;
            width: 100%;

            .first {
                margin-left: auto;
            }

            .makeSure {
                width: 72px;
                height: 36px;
                background-color: #155bd4;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
                cursor: pointer;
                color: #fff;
                margin-right: 10px;
            }
        }


        .el-form-item {
            width: 100%;

            ::v-deep {
                .el-form-item__content {
                    width: 80%;

                    .el-input {
                        width: 100%;

                    }
                }
            }
        }
    }
}
</style>